@page
@{ Layout = "_Layout"; }
@section Styles{
  <link href="/sitefiles/assets/css/cloud.css" rel="stylesheet" type="text/css" />
  <style>
    .main-wrapper {
      margin: 30px auto 100px;
    }
  </style>
}

<div class="main-wrapper">
  <div class="content">
    <section role="main">
      <el-row :gutter="20">
        <el-col :span="20" :offset="2">
          <div style="height: 25px"></div>
          <el-card class="box-card">
            <template v-if="isConnect">
              <div style="text-align: center; margin: 60px auto">
                <h1>通过设置 云助手 来激活基本的 SSCMS 安全和性能工具</h1>
                <iframe
                  id="connectWindow"
                  frameborder="0"
                  scrolling="no" 
                  style="width: 1px;min-width: 100%;min-height: 600px;"
                  :src="iFrameUrl"
                ></iframe>
              </div>
            </template>
            <template v-else>
              <div style="text-align: center; margin: 60px auto">
                <h1>通过设置 Cloud 云助手 来激活基本的 SSCMS 安全和性能工具</h1>
                <div class="tips">
                  点击设置 Cloud 云助手 按钮即表示，您同意遵守我们的
                  <el-link :underline="false" href="#" target="_blank">服务条款</el-link>
                  ，并与 sscms.com
                  <el-link :underline="false" href="#" target="_blank">共享详细信息</el-link>
                </div>
                <div style="height: 20px"></div>
                <el-button type="primary" size="medium" v-on:click="btnConnectClick">
                  设置 Cloud 云助手
                </el-button>
              </div>

              <div style="text-align: center; margin: 60px auto">
                <el-row :gutter="20">
                  <el-col :span="12" align="center">
                    <img src="/sitefiles/assets/images/security.svg" />
                    <h3>始终在线的安全性</h3>
                    <ul>
                      <li>通过内容审查、自动扫描和一键修复，避免安全威胁。</li>
                      <li>实时备份可保存所有更改，一键恢复可让您快速重新上线。</li>
                      <li>
                        如果您的站点出现故障，则可以免费保护您免受强力攻击的侵扰并即时收到通知。
                      </li>
                    </ul>
                  </el-col>
                  <el-col :span="12" align="center">
                    <img src="/sitefiles/assets/images/performance.svg" />
                    <h3>嵌入性能</h3>
                    <ul>
                      <li>
                        通过我们的全节点
                        CDN，以闪电般的速度加快资源加载时间，使访客在您站点上停留更长时间。
                      </li>
                      <li>自动加速您的移动站点并减少带宽用量。</li>
                      <li>通过定制的搜索体验提高访客的参与度和销售量。</li>
                    </ul>
                  </el-col>
                </el-row>
              </div>

              <div style="text-align: center; margin: 60px auto">
                <h3>除了安全和性能，Cloud 云助手还有更多出色功能在等待着您</h3>
              </div>
            </template>
          </el-card>
        </el-col>
      </el-row>
    </section>
  </div>
  <footer>
    <table class="footer">
      <tbody>
        <tr>
          <td>
            <a href="https://sscms.com/cloud/" target="_blank">云助手</a>
            <a href="https://sscms.com/docs/v7/cloud/" target="_blank">关于</a>
            <a href="https://sscms.com/docs/v7/cloud/terms-of-service.html" target="_blank">条款</a>
            <a href="https://sscms.com/docs/v7/cloud/privacy.html" target="_blank">隐私</a>
          </td>
        </tr>
      </tbody>
    </table>
  </footer>
</div>

@section Scripts{
  <script src="/sitefiles/assets/js/admin/clouds/connect.js" type="text/javascript"></script>
}